<script setup lang="ts">
import { reactive, ref } from 'vue'
import formCreate from '@form-create/element-ui'
import LTab from '@/components/layout/LTab.vue'
import { ConfigService } from '@/services/api/sys/config.service'
import ConfigManage from './components/ConfigManage.vue'
import { useRequest } from 'vue-request'
import { formRules } from './constant'
import type { Api, FormRule } from '@form-create/element-ui'

const configManageRef = ref()

const options = [
  {
    label: '业务类',
    value: 1,
  },
  {
    label: '系统类',
    value: 2,
  },
  {
    label: '其他',
    value: 9,
  },
]

const saveLoading = ref<boolean>(false)
const searchFormData = reactive({
  type: options[0].value,
})

const formData = ref<{
  [key: string]: unknown
}>({})

const saveForm = async () => {
  if (!formApi.value) return
  saveLoading.value = true
  formApi.value.submit(
    async (formData) => {
      console.log(formData)
    },
    () => {},
  )
  saveLoading.value = false
}

const { refresh, run, loading } = useRequest(ConfigService.getTree, {
  defaultParams: [
    {
      ...searchFormData,
    },
  ],
  onSuccess(data) {
    console.log(data)
  },
})

// 切换
const changeTab = () => {
  run(searchFormData)
}
// 刷新表格数据
const refreshTableData = () => {
  refresh()
}

const configManageHandel = () => {
  configManageRef.value.show('view', {
    type: searchFormData.type,
  })
}

const rule = ref<FormRule>(formCreate.parseJson(JSON.stringify(formRules)))
const formOption = ref(
  formCreate.parseJson(
    JSON.stringify({
      language: {},
      //栅格间隔
      gutter: 20,
      form: {
        inline: false,
        hideRequiredAsterisk: false,
        labelPosition: 'left',
        size: 'default',
        labelWidth: '140px',
        labelSuffix: ':',
      },
      globalEvent: {
        event_Feq4lui56zxbabc: {
          label: '自定义',
          deletable: false,
          handle: '[[FORM-CREATE-PREFIX-function handle($inject){aaa;}-FORM-CREATE-SUFFIX]]',
        },
        event_Feq4lui56zxbab2c: {
          label: '自定义2',
          handle: '[[FORM-CREATE-PREFIX-function(e){console.log(e)}-FORM-CREATE-SUFFIX]]',
        },
      },
      globalData: {
        data_Fk6dlui4k0xuabc: {
          label: '自定义数据',
          type: 'static',
          data: [1, 2, 3, 4],
        },
        data_Fs1elui4kttlacc: {
          action: 'http://192.168.1.4:8081/',
          deletable: false,
          method: 'GET',
          headers: {},
          data: {},
          parse: '[[FORM-CREATE-PREFIX-function parse(res){return res.data;}-FORM-CREATE-SUFFIX]]',
          onError: '[[FORM-CREATE-PREFIX-function onError(e){}-FORM-CREATE-SUFFIX]]',
          label: '自定义接口数据',
          type: 'fetch',
        },
      },
      resetBtn: {
        show: false,
        innerText: '重置',
      },
      submitBtn: {
        show: false,
        innerText: '提交',
      },
      globalVariable: {
        var_Fppdlz6gytmzb1c: {
          label: 'token',
          deletable: false,
          handle:
            '[[FORM-CREATE-PREFIX-function(e,n){return e("$cookie.token")||"default Token"}-FORM-CREATE-SUFFIX]]',
        },
      },
      globalClass: {
        cls_Fzmulzw3u0oib0c: {
          label: 'fff',
          deletable: false,
          style: {
            color: 'red',
          },
        },
      },
    }),
  ),
)
const formApi = ref<Api | null>(null)
</script>

<template>
  <LTab v-model="searchFormData.type" :options="options" :border="false" @change="changeTab">
    <template #top-right>
      <el-space>
        <el-button
          v-if="!loading"
          size="small"
          type="success"
          @click="saveForm()"
          icon="CircleCheck"
          :loading="saveLoading"
          >保 存</el-button
        >
        <el-button size="small" type="primary" @click="configManageHandel">配置</el-button>
      </el-space>
    </template>
    <el-scrollbar wrap-class="scrollbar-wrapper h-full" v-if="!loading">
      <form-create
        v-model:modelValue="formData"
        v-model:api="formApi"
        :rule="rule"
        :option="formOption"
      ></form-create>
    </el-scrollbar>
    <el-empty class="h-full" v-else description="暂无配置" />
  </LTab>
  <ConfigManage ref="configManageRef" @success="refreshTableData" />
</template>
